import React, {Component} from 'react';
import {View, StyleSheet, ViewPropTypes, Text, Image, TouchableOpacity, TouchableHighlight} from 'react-native';
import PropTypes from 'prop-types';
import Data from "@greens/utils/src/data";

export default class ItemContent extends Component {

	constructor(props) {
		super(props);
	}

	InfoBoxItems() {
		let items = [];
		for (let index = 0; index < this.props.dataSource.length; index++) {
			let itemData = this.props.dataSource[index];
			let aItemStyle = Object.assign({}, this.props.defaultItemStyle);
			let itemStyle = this.props.itemStyles(itemData, index);
			if (itemStyle != null && itemStyle != undefined) {
				Object.assign(aItemStyle, itemStyle);
			}
			items.push({'itemData': itemData, 'itemStyle': aItemStyle});
		}
		const itemViews = items.map((item, index) => (
			<View style={styles.infoBox} key={index}>
				<Text style={[styles.infoBoxItemTitle, this.props.infoBoxItemTitle, item.itemStyle.keyStyle,]}>
					{item.itemData.key}
				</Text>
				<View style={styles.infoBoxValueBox}>
					{!Data.isEmpty(item.itemData.value) ? (
						<TouchableOpacity activeOpacity={0.6} onPress={item.itemData.onPress} disabled={!item.itemData.onPress}>
							<Text
								numberOfLines={item.itemData.valueNumberOfLines}
								style={[styles.infoBoxItemContent, item.itemStyle.valueStyle]}
							>
								{item.itemData.value}
							</Text>
						</TouchableOpacity>
					) : null}
					{!Data.isEmpty(item.itemData.subValue) ? (
						<Text style={[styles.infoBoxItemSubContent, item.itemStyle.subValueStyle]}>
							{item.itemData.subValue}
						</Text>
					) : null}
				</View>
			</View>
		))
		return itemViews;
	}

	mainContent() {
		return (
			<View style={[styles.container, this.props.containerStyle]}>
				<View style={[{flex: 1}]}>{this.InfoBoxItems()}</View>
				<View>
					{this.props.itemSelectStatus == itemSelect.none ? null : (
						<View style={{justifyContent: 'center', flex: 1}}>
							<Image
								style={{marginRight: 15, marginLeft: 5, marginBottom: 10}}
								source={
									this.props.itemSelectStatus == itemSelect.selected
										? require('./check_box_s2.png')
										: require('./check_box_n2.png')
								}
							/>
						</View>
					)}
					{this.props.showRightAccessory ? <View style={{justifyContent: 'center', flex: 1}}>
						<Image
							style={{marginRight: 15}}
							source={require("../images/item_arrow.png")}
						/>
					</View> : null}
				</View>
			</View>
		)
	}

	render() {
		return (
			<View>
				{
					this.props.itemOnClick ? <TouchableOpacity
							onPress={() => {
								this.props.itemOnClick();
							}}
						>
							{this.mainContent()}
						</TouchableOpacity>
						: this.mainContent()
				}
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		backgroundColor: '#FFFFFF',
		paddingTop: 10,
		paddingBottom: 10,
		flexDirection: 'row',
	},
	infoBox: {
		flexDirection: 'row',
		paddingRight: 7,
		paddingTop: 8,
		paddingBottom: 8,
	},
	infoBoxItemTitle: {
		marginLeft: 15,
		maxWidth: 103
	},
	infoBoxValueBox: {
		flexDirection: 'row',
		flexWrap: 'wrap',
		flex: 1,
	},
	infoBoxItemContent: {
		marginLeft: 5
	},
	infoBoxItemSubContent: {
		marginLeft: 2,
		marginBottom: 1,
		alignSelf: 'flex-end'
	}
});

export const itemSelect = {
	unSelected: 0,
	selected: 1,
	none: 2
}

ItemContent.propTypes = {
	dataSource: PropTypes.array.isRequired, ///item 的数据数组
	containerStyle: ViewPropTypes.style,
	infoBoxItemTitle: ViewPropTypes.style,
	itemStyles: PropTypes.func, ///item的风格定制接口
	itemOnClick: PropTypes.func, //item点击事件
	itemSelectStatus: PropTypes.oneOf([itemSelect.unSelected, itemSelect.selected, itemSelect.none]), //item选中需求
	showRightAccessory: PropTypes.bool ///右侧显示箭头
}

ItemContent.defaultProps = {
	dataSource: [
		{
			key: '姓名',
			value: '',
		}, {
			key: '手机号',
			value: '',
			subValue: '',
		}
	],
	itemStyles: (item, index) => {
		return ({
			keyStyle: {
				fontSize: 15,
				color: '#444444'
			},
			valueStyle: {
				fontSize: 15,
				color: '#000000',
			},
			subValueStyle: {
				fontSize: 12,
				color: '#999999',
			}
		})
	},
	itemSelectStatus: itemSelect.none,
	showRightAccessory: false,
}
